<template>
  <div class="my_collect">
    <div class="row pt-4 ml-2 pb-3 border-bottom">
      <div class="col-md-5">
        <span class="" style="font-weight: bold;font-size: 22px;color: #1c6285;"><i class="fa fa-vcard fa-fw pr-1" ></i>我的关注</span>
        <span class="text-right pl-3" style="color: #1c6285">{{this.total}}位</span>
      </div>
      <!--            搜索框-->
      <div class="col-md-7" align="right">
        <div class="row">
          <div class="col-md-7 input-group">
            <el-input
                size="large"
                placeholder="请输入用户名..."
                v-model="find_user"
                clearable
                @keyup.enter.native="findByName">
            </el-input>
          </div>
          <div class="col-md-5">
          <span class="input-group-btn">
            <el-button type="" icon="el-icon-search" @click="findByName()" size="large">搜索</el-button>
          </span>
            <span class="pl-2">
            <el-button type="" @click="clearInput()" size="large">重置</el-button>
          </span>
          </div>
        </div>
      </div>

    </div>
    <!--我的关注列表-->
    <div class="person_post pt-1" v-if="this.show_info.length>0">
      <div class="post" v-for="(attention) in show_info" :key=attention.attention_id>
        <ul class="list-unstyled pl-2">
          <li class="media">
            <div class="user_img">
              <img :src="'/api/storage/user_img/' + attention.img" class="mr-3 mt-3" alt="..." style="height: 60px;width: 60px">
            </div>
            <div class="media-body">
              <div class="user_name">
                <a class="mb-1" href="javascript:void(0);"
                   @click="change_user_main(attention.user_id)">
                    {{attention.user_name}}
                </a>
                <span v-if="attention.identity==0"  style="color: #6b6e71;font-size: 15px;" >学生</span>
                <span v-else-if="attention.identity==1"  style="color: #6b6e71;font-size: 15px;" >已毕业的学长学姐</span>
                <span v-else-if="attention.identity==-1"  style="color: #6b6e71;font-size: 15px;" >老师</span>
              </div>
              <div class="row content pt-2">
                <div class="col-md-8">
                  <p style="color: #6b6e71;font-size: 15px;" >个人介绍：{{attention.profile}}</p>
                </div>
                <div class="col-md-4 fontclass pt-2" style="text-align: right;">
                  <a @click="submit(attention.attention_id)" href="javascript:void(0);" style="color: #1c6285">
                    <i class="fa fa-star fa-fw"></i> 取消关注
                  </a>
                </div>
              </div>

            </div>
          </li>
          <div class="dropdown-divider"></div>
        </ul>
      </div>



    </div>
    <div class="noFile pt-5" v-else>
      <img :src="imgs.noInfo" alt="...">
      <h2>{{this.nullContainer}}</h2>
    </div>
    <div class="block pt-3 pb-4" v-show="this.show_info.length>0">
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="attContainerPage"
          :page-size="attContainerSize"
          layout="total, prev, pager, next"
          :total="total">
        <!--          :background="'whitesmoke'" -->
      </el-pagination>
    </div>
  </div>
</template>

<script>
import noInfo from "@/assets/noFile.png";
import {getMyAttention,cancelAttention} from '@/api/User'

export default {
  name: "person_attention",
  data(){
    return{
      imgs:{
        noInfo
      },
      //分页
      attContainerPage:0, // 分页的数据：当前页数
      attContainerSize:0, // 分页的数据：每页的数量
      total: 0,
      collect_info:[],
      nullContainer: "你还没关注任何用户~",
      attention_info:[],
      show_info:[],
      search_info:[],
      copy_info:[],

    //  搜索
      find_user:'',




    }
  },
  methods:{
    change_user_main(be_subscribe){

      if(this.$router.history.current.path !='/User_Main/User_Note') {
        this.$router.push({
          path: '/User_Main/User_Note',
          query: {user_id: be_subscribe}
        });
      }

    },
    // 获取当前登录用户的关注列表
    init(){
      getMyAttention({
        token:window.sessionStorage.getItem('token')
      }).then(res=>{
        this.attention_info=res.data.data;
        this.copy_info=res.data.data;
        this.getShowAttention();
      })
    },
    //分页
    getShowAttention(){
      this.attContainerSize=parseInt(8);
      this.show_info = this.attention_info.slice((this.attContainerPage - 1) * this.attContainerSize, this.attContainerPage * this.attContainerSize);
      this.total=parseInt(this.attention_info.length);
    },
    //page改变时的回调函数，参数为当前页码
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.attContainerPage= parseInt(val);
      this.getShowAttention();
    },
    //  取消关注
    submit(attention_id){
      //再次确认
      this.$confirm('确认取消关注?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.cancel_attention(attention_id);
      }).catch(() => {
        this.$msg.error("取消！");
      });

    },
    cancel_attention(attention_id){

      cancelAttention({
        attention_id:attention_id,
        // token:window.sessionStorage.getItem('token')
      }).then(res=>{
        if(res.data.code===1){
          this.$msg.success("取消关注成功！")
        }else{
          this.$msg.error("取消关注失败！");
        }
        this.init();
      });

    },

    // 清空搜索框
    clearInput(){
      //清空搜索框
      this.find_user="";
      this.init();
    },

    //根据用户名搜索功能
    findByName(){
      var search=this.find_user;
      if(search==""||search==null)
      {
        this.$msg.error('输入框不能为空！');
        this.init();
      }
      else {
        //执行本地过滤
        var search_list=this.copy_info;
        this.search_info=[];  //装搜索结果的容器
        for(let i=0;i<search_list.length;i++)
        {
          if(search_list[i].user_name.indexOf(search)>=0)
          {
            this.search_info.push(search_list[i]);
          }
        }
        if(this.search_info.length==0)
        {
          this.nullContainer='未找到相关结果,刷新一下~';
          this.$msg.error('未找到相关结果,刷新一下~');
        }
        else
        {
          this.nullContainer='暂无数据~';
        }
        this.attention_info=this.search_info;
        //分页
        this.attContainerPage=parseInt(1);
        this.getShowAttention();

        //清空搜索框
        this.find_user="";
      }
    },





  },
  created() {
    let _this = this;

    _this.attContainerPage=parseInt(1);

    _this.init();

  }

}
</script>

<style scoped>
.el-pagination {
  text-align: center;
}
/*多行显示省略号，数字5为超出5行显示*/
.content p{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  letter-spacing:3px;
  color: #6b6e71;
  font-size: 16px;
}
.content p:hover{
  color: black;
}
/*无数据图*/
.noFile{
  margin-top: 200px;
  padding-bottom: 300px;
  /*margin: 0px auto;*/
  text-align: center;
  font-size: 50px;
  color: #6b6e71;
}
.fontclass a{
  font-size: 18px;
  color: #6b6e71;
}
.fontclass a:hover{
  font-weight: bold;
}
/*.media:hover{*/
/*  background-color: whitesmoke;*/
/*}*/
.user_name a:hover{
  color: #1c6285;
}
.user_name a{
  color: black;
  font-size: 30px;
}
</style>
